<template>
	<uv-subsection
		:list="list" 
		:current="modelValue"
		:customStyle="`height: 94rpx;padding:0`" 
		:customItemStyle="`background:${themeColor};activeBorderColor:${themeColor}`" 
		:activeColor="activeColor"
		:inactiveColor="inactiveColor"
		:mode="mode"
		:keyName="keyName"
		@change="sectionChange"
	>
	</uv-subsection>
</template>

<script setup>
	import sheep from "@/sheep"
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		mode:{
			type:String,
			default:'subsection'
		},
		modelValue: {
			type: Number,
			default: 0
		},
		activeColor:{
			type:String,
			default:'#fff'
		},
		inactiveColor:{
			type:String,
			default:'#33D65F'
		},
		isSsync:{
			type:Boolean,
			default:false
		},
		keyName:{
			type:String,
			default:'name'
		}
	})
	const emit = defineEmits(['update:modelValue','change'])
	const sectionChange = (e) => {
		if(!props.isSsync) emit('update:modelValue',e)
		emit('change',e)
	}
	const themeColor = '#33D65F'
	// const themeColor = computed(() => sheep.$store('app').scss.main)
</script>

<style lang="scss" scoped>
	:deep .uv-subsection__item {
		border:1rpx solid $main-color !important;
	}
</style>